<template>
  <el-dialog width="60%" title="分配权限" :visible.sync="treeDialogVisible" @closed="closeTreeDialog">
    <template>
      <!-- 提示 -->
      <el-alert title="该角色已有权限" type="success" center :closable="false" />

      <!-- permission组件 -->
      <role-permission-table :rid="roleInfo.id" ref="permissionTableRef" />

      <!-- 分配权限表单 -->
      <el-form :model="rolePermissionInfo" ref="rolePermissionRef" label-width="100px">
        <el-form-item label="选择权限" prop="permissions">
          <el-cascader
            v-model="rolePermissionInfo.permissions"
            :options="permissions"
            :props=" {multiple: true}"
          />
        </el-form-item>
      </el-form>

      <!-- 按钮区域 -->
      <span slot="footer">
        <el-button @click="treeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendRoleRightRequest">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
// 网络
import { getAllPermissions, updateRolePermissions } from '@/network/roleControlRequest.js'

// 组件
import RolePermissionTable from '@/views/Main/rightList/roleListComponents/RolePermissionTable'

export default {
  data() {
    return {
      treeDialogVisible: false,
      // renderComponent: true, // 用于强制渲染组件flag
      roleInfo: {}, // 当前角色数据
      permissions: [{ lable: '1', value: '1' }], // 所有权限
      rolePermissionInfo: {
        id: '',
        permissions: []
      }
    }
  },
  methods: {
    /**
     * 开启dialog回调函数
     */
    async openDialog(data) {
      this.roleInfo = data;
      // console.log(this.roleInfo);
      this.rolePermissionInfo.id = this.roleInfo.id;
      this.treeDialogVisible = true;
      await this.$nextTick(() => this.$refs['permissionTableRef'].getRolePermissions());
      // 请求
      await this.getPermissions();
      
    },

    /**
     * 获取所有权限
     */
    async getPermissions() {
      
      const { meta, data } = await getAllPermissions();

      // fail
      if (meta.status != 200) { return this.$message('请联系管理员'); }

      // success
      const cascaderPermissions = []
      data.permissions.forEach(item => cascaderPermissions.push({ label: item.url, value: item.id }))
      this.permissions = cascaderPermissions;

    },

    /**
     * 关闭dialog弹框触发函数
     */
    closeTreeDialog() {
      return this.$refs['rolePermissionRef'].resetFields() // 表单重置
    },

    /**
     * 确认分配权限
     */
    async sendRoleRightRequest() {
      const ret = await this.$refs['rolePermissionRef'].validate()
      if (!ret) {
        return this.$message.error('请将表单填写完整')
      }

      // check pass -> network request
      // check role Object
      const roleObj = {
        permissions: []
      }
      roleObj.id = this.rolePermissionInfo.id
      this.rolePermissionInfo.permissions.forEach(item => roleObj.permissions.push({ id: item[0] }))

      // network request
      const { meta } = await updateRolePermissions(roleObj)

      // fail
      if (meta.status != 200) {
        return this.$message.error(meta.msg)
      }

      // success
      this.$message.success('分配成功')
      this.treeDialogVisible = false // 关闭dialog
      return this.$bus.$emit('getRightList') // 重新获取角色信息
    }
  },
  created() {
    this.$bus.$on('treeDialogOpen', data => this.openDialog(data))
  },
  destroyed() {
    // console.log('触发');
    this.$bus.$off('treeDialogOpen')
  },
  components: {
    RolePermissionTable
  }
}
</script>

<style lang="scss" scoped>
.el-alert {
  margin-bottom: 10px;
}
.el-form {
  margin-top: 10px;
}
</style>



